<template>
	<div class="sys-cell">
		<div class="cell-header">
			<div style="width: calc(100% - 200px); height: 100%; display: flex">
				<div class="cell-btn top-menu-hover toolbtn" @click="workplansave">
					<el-tooltip class="item" effect="dark" content="保存" placement="top">
						<span class="iconfont iconbiaoge-baocun"></span>
					</el-tooltip>
				</div>
				<div class="divsplit"></div>
				<div class="cell-btn top-menu-hover toolbtn" @click="clone">
					<el-tooltip class="item" effect="dark" content="克隆" placement="top">
						<span class="iconfont iconliucheng-kelong1"></span>
					</el-tooltip>
				</div>
				<div class="divsplit"></div>
				<div class="cell-btn top-menu-hover toolbtn" @click="workplandelete">
					<el-tooltip class="item" effect="dark" content="删除" placement="top">
						<span class="iconfont iconbiaoge-shanchu"></span>
					</el-tooltip>
				</div>
				<!-- <div class="cell-btn top-menu-hover toolbtn" @click="view">
					<el-tooltip class="item" effect="dark" content="浏览" placement="top">
						<span class="iconfont iconhuitu-yulan"></span>
					</el-tooltip>
        </div>-->
			</div>
			<div style="width: 200px; height: 100%; display: flex" class="flow-version">
				<span>版本选择:</span>
				<el-select class="systemInput" v-model="version" style="width: 100px; height: 24px" @change="checkDataChange">
					<el-option v-for="item in versions" :key="item.id" :label="item.version" :value="item.id" style="width: 100px"></el-option>
				</el-select>
			</div>
		</div>
		<!--表单设计部分-->
		<div class="cellcenter">
			<div style="
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: space-between;
        ">
				<div id="bussinessPaletteDiv"></div>
				<div id="bussinessDiagramDiv"></div>
			</div>
		</div>
		<winBussinessNode v-if="showtype == 'node'" :activeNode="actNode" @close="close" @ok="setBussinessNode"></winBussinessNode>
		<winBussinessLink v-if="showtype == 'link'" :activeLink="actLink" @close="close" @ok="setBussinessLink"></winBussinessLink>
		<winBussinessModel v-if="showtype == 'model'" :activeModel="bussinessModel" @close="close" @ok="setBussinessModel"></winBussinessModel>
		<winBussinessView v-if="showtype == 'view'" :wpInstId="wpInstId" :instNodeId="instNodeId" @close="close"></winBussinessView>
	</div>
</template>

<script>
	import winBussinessNode from "@/system/components/winBussinessNode.vue";
	import winBussinessLink from "@/system/components/winBussinessLink.vue";
	import winBussinessModel from "@/system/components/winBussinessModel.vue";
	import winBussinessView from "@/system/components/winBussinessView.vue";
	import {
		deepCopy
	} from "@/utils/public";
	import {
		workplanversion,
		workplandetail,
		workplansave,
		workplandelete,
		workplanctive,
	} from "@/system/api/bussinessEdit";
	import go from "gojs";
	let gmake = go.GraphObject.make;

	export default {
		name: "sysBussinessEdit",
		components: {
			winBussinessNode,
			winBussinessLink,
			winBussinessModel,
			winBussinessView,
		},
		props: {
			cellid: {
				default: null,
			},
		},
		watch: {
			cellid: {
				handler(newName, oldName) {},
				immediate: true,
			},
		},
		data() {
			return {
				from: "",
				to: "",
				bussinessId: null,
				myPalette: null,
				myDiagram: null,
				lightText: "whitesmoke",
				model: {
					class: "GraphLinksModel",
					linkFromPortIdProperty: "fromPort",
					linkToPortIdProperty: "toPort",
					nodeDataArray: [],
					linkDataArray: [],
				},
				showtype: null,
				usedkeys: [],
				tnode: {
					code: null,
					name: "",
					title: "",
					note: "",
					model: "",
					bussines: "",
					state: "",
					managerole: "",
					actrole: "",
					actime: "",
					unit: 1,
					visible: "",
					important: 1,
					ord: "",
					runType: 2,
					excludeNodes: "",
					startScript: "",
					runScript: "",
					endScript: "",
					checkList: "",
					run: false,
					startNode: false,
					allEnd: false,
					startMore: false,
					moreEnd: false,
				},
				tlink: {
					code: null,
					name: null,
					note: null,
					filter: null,
					linkSelect: null,
				},
				bussinessModel: {
					active: true,
					code: "",
					node: [],
					edge: [],
					vvar: [],
					jpush: true,
					sms: false,
				},
				actGnode: null,
				actGlink: null,
				actNode: null,
				actLink: null,
				version: null,
				versions: [],
				//测试业务模型用的
				wpInstId: null,
				instNodeId: null,
			};
		},
		props: {},
		created() {},
		mounted() {
			let self = this;
			this.myDiagram = gmake(
				go.Diagram,
				"bussinessDiagramDiv", // 网格锁定must name or refer to the DIV HTML element
				{
					initialContentAlignment: go.Spot.Center,
					allowDrop: true, // must be true to accept drops from the Palette
					scrollsPageOnFocus: false,
					"undoManager.isEnabled": true, // enable undo & redo
					allowRelink: true,
					padding: 100,
					isReadOnly: true,
          			"grid.visible": true, //显示网格
					grid: gmake(go.Panel, "Grid",
						gmake(go.Shape, "LineH", { stroke: "lightgray", strokeWidth: 0.5 }),
						gmake(go.Shape, "LineH", { stroke: "gray", strokeWidth: 0.5, interval: 10 }),
						gmake(go.Shape, "LineV", { stroke: "lightgray", strokeWidth: 0.5 }),
						gmake(go.Shape, "LineV", { stroke: "gray", strokeWidth: 0.5, interval: 10 })
					),
					"draggingTool.isGridSnapEnabled": true, //自动锁定
					nodeSelectionAdornmentTemplate: gmake(
						go.Adornment,
						"Auto",
						gmake(go.Shape, "Rectangle", {
							fill: "white",
							stroke: null,
						})
					),
					doubleClick: function(e) {
						if (!e.diagram.isReadOnly) {
							self.showtype = "model";
						}
					},
				}
			);
			let graygrad = gmake(go.Brush, "Linear", {
				0: "#F5F5F5",
				1: "#00A9C9",
			}); // 定义图表格式刷

			this.myDiagram.nodeTemplateMap.add(
				"all",
				gmake(
					go.Node,
					"Spot",
					self.nodeStyle(), {
						resizable: true,
						resizeObjectName: "PANEL",
						name: "nodeSpot",
						click: function(e, node) {},
						doubleClick: function(e, node) {
							if (node.data.key.toString().indexOf("N-") > -1) {
								self.actNode = self.getModelNode(node.data.key);
								self.actGnode = node;
								self.showtype = "node";
							}
						},
						//	            isShadowed: true,//加阴影
					},
					gmake(
						go.Panel,
						"Auto", {
							name: "panel",
						},
						gmake(go.Shape, "RoundedRectangle", {
							fill: "rgba(83, 168, 255, 1)",
							stroke: null,
							strokeWidth: 1,
							name: "nodeshape",
							minSize: new go.Size(60, 30), //设置了大小，那么手动调节的地方也要设置
						}),
						gmake(
							go.TextBlock, {
								font: "bold 12px Helvetica, Arial, sans-serif",
								stroke: this.lightText, //stroke  字体
								wrap: go.TextBlock.WrapFit,
								textAlign: "center",
								editable: false,
								name: "nodetext",
							},
							new go.Binding("text").makeTwoWay(),

							new go.Binding("nodestate").makeTwoWay()
						)
					),
					new go.Binding("width").makeTwoWay(),
					new go.Binding("height").makeTwoWay(),
					// three named ports, one on each side except the top, all output only:
					this.makePort("T", go.Spot.Top, true, true),
					this.makePort("L", go.Spot.Left, true, true),
					this.makePort("R", go.Spot.Right, true, true),
					this.makePort("B", go.Spot.Bottom, true, true)
				)
			);

			//	      self.myDiagram.toolManager.linkingTool.temporaryLink.routing = go.Link.Orthogonal;
			//	      self.myDiagram.toolManager.relinkingTool.temporaryLink.routing = go.Link.Orthogonal; //线的转弯
			self.myDiagram.nodeTemplateMap.add(
				"textblo",
				gmake(
					go.Node,
					"Auto",
					self.nodeStyle(), {
						resizable: true,
						resizeObjectName: "PANEL",
						text: "node",
						//	            isShadowed: true,//加阴影
					},
					gmake(
						go.Panel,
						"Auto",
						gmake(
							go.Shape, {
								fill: "rgba(83, 168, 255, 1)",
								stroke: null,
								strokeWidth: 1,
								name: "nodeshape",
								minSize: new go.Size(60, 30),
							},
							new go.Binding("text").makeTwoWay()
						),
						gmake(
							go.TextBlock, {
								margin: 5,
								wrap: 10,
								textAlign: "center",
								editable: true,
								font: "Arial",
								stroke: "#fff",
								name: "nodetext",
							},
							new go.Binding("text").makeTwoWay(),
							new go.Binding("nodestate").makeTwoWay()
						),
						new go.Binding("text").makeTwoWay()
					)
				)
			);

			self.myDiagram.linkTemplate = gmake(
				go.Link, // the whole link panel
				{
					routing: go.Link.AvoidsNodes,
					curve: go.Link.JumpOver,
					corner: 5,
					toShortLength: 4,
					relinkableFrom: true,
					relinkableTo: true,
					reshapable: true,
					resegmentable: true,
					selectionAdorned: false,
					mouseEnter: function(e, link) {
						link.findObject("HIGHLIGHT").stroke = "rgba(30,144,255,0.2)";
					},
					mouseLeave: function(e, link) {
						link.findObject("HIGHLIGHT").stroke = "transparent";
					},
					doubleClick: function(e, link) {
						self.actLink = self.getModelLink(link.data.key);
						self.actGlink = link;
						self.showtype = "link";
					},
				},
				new go.Binding("points").makeTwoWay(),
				gmake(
					go.Shape, // the highlight shape, normally transparent
					{
						isPanelMain: true,
						strokeWidth: 8,
						stroke: "transparent",
						name: "HIGHLIGHT",
					}
				),
				gmake(
					go.Shape, // the link path shape
					{
						isPanelMain: true,
						stroke: "gray",
						strokeWidth: 2,
					},
					new go.Binding("stroke", "isSelected", function(sel) {
						return sel ? "dodgerblue" : "gray";
					}).ofObject()
				),
				gmake(
					go.Shape, // the arrowhead
					{
						toArrow: "standard",
						stroke: "gray",
						fill: "gray",
					}
				),
				gmake(
					go.Panel,
					"Auto", // the link label, normally not visible
					{
						visible: true,
					},
					new go.Binding("visible", "visible").makeTwoWay(),
					gmake(
						go.Shape,
						"RoundedRectangle", // the label shape
						{
							fill: "transparent",
							stroke: null,
						}
					),
					gmake(
						go.TextBlock,
						" ", // the label
						{
							textAlign: "center",
							font: "10pt helvetica, arial, sans-serif",
							stroke: "#999",
							editable: false,
						},
						new go.Binding("text").makeTwoWay(),
						new go.Binding("name").makeTwoWay()
					)
				)
			); //线上文字

			this.myPalette = gmake(
				go.Palette,
				"bussinessPaletteDiv", // must name or refer to the DIV HTML element
				{
					scrollsPageOnFocus: false,
					allowZoom: false,
					allowVerticalScroll: false,
					nodeSelectionAdornmentTemplate: gmake(
						go.Adornment,
						"Auto",
						gmake(go.Shape, "Rectangle", {
							fill: "white",
							stroke: null,
						})
					),
					//makeTwoWay()进行双向绑定
					// share the templates used by myDiagram
					nodeTemplateMap: self.myDiagram.nodeTemplateMap, // 节点（node）/线（link）的动态添加及样式

					model: new go.GraphLinksModel([
						// specify the contents of the Palette
						{
							text: "模块名",
							category: "all",
							width: "50",
							height: "40",
							nodestate: 2,
						},
						{
							text: "文本框",
							width: "50",
							height: "40",
							category: "textblo",
							nodestate: 2,
						},
					]),
				}
			);
			this.myDiagram.model = go.Model.fromJson(this.model);
			this.myDiagram.commandHandler.doKeyDown = function() {
				let e = self.myDiagram.lastInput;
				if (!e.diagram.isReadOnly) {
					//只读的时候，就不能编辑
					let control = e.control || e.meta;
					let shift = e.shift || e.meta;
					let addH = 0;
					let addw = 0;
					if (e.key == "Up") {
						addH = -0.5;
					}
					if (e.key == "Down") {
						addH = 0.5;
					}
					if (e.key == "Left") {
						addw = -0.5;
					}
					if (e.key == "Right") {
						addw = 0.5;
					}
					if (control) {
						if (
							e.key == "Up" ||
							e.key == "Down" ||
							e.key == "Left" ||
							e.key == "Right"
						) {
							for (let it = self.myDiagram.selection.iterator; it.next();) {
								let part = it.value;
								let x = part.location.x + addw;
								let y = part.location.y + addH;
								self.myDiagram.model.setDataProperty(
									part,
									"location",
									new go.Point(x, y)
								);
							}
							return;
						}
					}
					if (shift) {
						if (
							e.key == "Up" ||
							e.key == "Down" ||
							e.key == "Left" ||
							e.key == "Right"
						) {
							for (let it = self.myDiagram.selection.iterator; it.next();) {
								let part = it.value;
								let x = part.qc.width + addw;
								let y = part.qc.height + addH;
								self.myDiagram.model.setDataProperty(
									part,
									"desiredSize",
									new go.Size(x, y)
								);
							}
							return;
						}
					}
					//			    let key = e.key;
					go.CommandHandler.prototype.doKeyDown.call(this);
				}
			};

			this.myDiagram.addDiagramListener("ExternalObjectsDropped", function(e) {
				//diagram.nodes.fg.fa.value.elements.pb.j[0].elements.pb.j[0].name == 'nodeshape'
				//ws.fa.value.elements.pb.j[0].elements.pb.j[0].name
				//links.iterator.fg.Db[11232] 路由信息
				//nodes.fg.Db[10268].value.data.text 节点信息
				e.subject.each(function(part) {
					let tkey = self.getKey();
					let tnode = deepCopy(self.tnode);
					self.$set(tnode, "code", tkey);
					self.$set(tnode, "name", part.data.text);
					self.bussinessModel.node.push(tnode);
					self.myDiagram.model.setKeyForNodeData(part.data, tkey);
					part.height = 40;
					part.width = 120;
					//						self.myDiagram.model.setDataProperty(part.data,'name','RC-JYGL-SCXX-9');
					//						self.myDiagram.model.setDataProperty(part.data,'text','经营管理');
				});
			});
			this.myDiagram.addDiagramListener("LinkDrawn", function(e) {
				let tkey = self.getKey(0);
				let tlink = deepCopy(self.tlink);
				self.$set(tlink, "code", tkey);
				let ttext = "发送";
				self.$set(tlink, "name", ttext);
				self.$set(tlink, "fnodeCode", e.subject.fromNode.key); //fromNode
				self.$set(tlink, "tnodeCode", e.subject.toNode.key);
				self.bussinessModel.edge.push(tlink);
				self.myDiagram.model.setKeyForNodeData(e.subject.data, tkey);
				self.myDiagram.model.setDataProperty(e.subject.data, "text", ttext);
			});

			this.myDiagram.addDiagramListener("SelectionDeleted", function(e) {
				e.subject.each(function(part) {
					self.delnodeORlink(part.data);
				});
			});
			this.myDiagram.addModelChangedListener(function(evt) {
				// ignore unimportant Transaction events
				if (!evt.isTransactionFinished) return;
				var txn = evt.object; // a Transaction
				if (txn === null) return;
				// iterate over all of the actual ChangedEvents of the Transaction
				txn.changes.each(function(e) {
					// record node insertions and removals
					if (e.change === go.ChangedEvent.Property) {
						if (e.modelChange === "linkFromKey") {
							let newFromId = "";
							self.bussinessModel.node.forEach((node, index) => {
								if (node.code == e.newValue) {
									newFromId = node.id;
								}
							});
							let tindex = -1;
							self.to = e.object.to;
							self.from = e.oldValue;
							self.bussinessModel.edge.forEach((edge, index) => {
								if (edge.fnodeCode == self.from && edge.tnodeCode == self.to) {
									tindex = index;
									self.bussinessModel.edge[tindex].fnodeCode = e.newValue;
									self.bussinessModel.edge[tindex].fnodeId = newFromId;
								}
							});
						} else if (e.modelChange === "linkToKey") {
							let newToId = "";
							self.bussinessModel.node.forEach((node, index) => {
								if (node.code == e.oldValue) {
									newToId = node.id;
								}
							});
							let tindex = -1;
							self.from = e.object.from;
							self.to = e.oldValue;
							self.bussinessModel.edge.forEach((edge, index) => {
								if (edge.fnodeCode == self.from && edge.tnodeCode == self.to) {
									tindex = index;
									self.bussinessModel.edge[tindex].tnodeCode = e.newValue;
									self.bussinessModel.edge[tindex].fnodeId = newToId;
								}
							});
						}
					}
					// else if (
					//   e.change === go.ChangedEvent.Insert &&
					//   e.modelChange === "linkDataArray"
					// ) {
					// } else if (
					//   e.change === go.ChangedEvent.Remove &&
					//   e.modelChange === "linkDataArray"
					// ) {
					// }
				});
			});
		},
		methods: {
			delnodeORlink(data) {
				if (data.key.toString().indexOf("N-") > -1) {
					let tindex = -1;
					this.bussinessModel.node.forEach((node, index) => {
						if (node.code == data.key) {
							tindex = index;
						}
					});
					if (tindex > -1) {
						this.bussinessModel.node.splice(tindex, 1);
					}
				}
				if (data.key.toString().indexOf("L-") > -1) {
					let tindex = -1;
					this.bussinessModel.edge.forEach((edge, index) => {
						if (edge.code == data.key) {
							tindex = index;
						}
					});
					if (tindex > -1) {
						this.bussinessModel.edge.splice(tindex, 1);
					}
				}
			},
			showWind() {
				this.showtype = "link";
			},
			nodeStyle(e, obj) {
				let _this = this;
				return [
					new go.Binding("location", "loc", go.Point.parse).makeTwoWay(
						go.Point.stringify
					),
					{
						locationSpot: go.Spot.Center,
						mouseEnter: function(e, obj) {
							_this.showPorts(obj.part, true);
						},
						mouseLeave: function(e, obj) {
							_this.showPorts(obj.part, false);
						},
					},
				];
			},
			showPorts(node, show) {
				var diagram = node.diagram;
				if (!diagram || diagram.isReadOnly || !diagram.allowLink) return;
				node.ports.each(function(port) {
					port.stroke = show ? "white" : null;
				});
			},
			//当鼠标选中的时候出现可以连线的点，一般有上下左右四个点
			makePort(name, spot, output, input) {
				//不能用demo4的  makePort  要不然边框会缺失
				// the port is basically just a small circle that has a white stroke when it is made visible
				return go.GraphObject.make(go.Shape, "Circle", {
					fill: "transparent",
					stroke: null, // this is changed to "white" in the showPorts function
					desiredSize: new go.Size(8, 8),
					name: name + "circle",
					alignment: spot,
					alignmentFocus: spot, // align the port on the main Shape
					portId: name, // declare this object to be a "port"
					fromSpot: spot,
					toSpot: spot, // declare where links may connect at this port
					fromLinkable: output,
					toLinkable: input, // declare whether the user may draw links to/from here
					cursor: "pointer", // show a different cursor to indicate potential link point
				});
			},
			writeJson() {},
			setText() {
				for (let it = this.myDiagram.selection.iterator; it.next();) {
					let part = it.value;
					part.height = 50;
					part.width = 300;
					let nodetext = part.findObject("nodetext");
					nodetext.text = "高兴就好！";
					let nodeshape = part.findObject("nodeshape");
					//		    	let portColors = ["#4caf50", "#cddc39", "#673ab7", "#f44336", "#ffc107", "#2196f3", "#795548"]
					//		    	let brush = gmake(go.Brush, "Linear", { 0: "#F5F5F5", 1: portColors[Math.floor(Math.random() * portColors.length)] }); // 定义图表格式刷
					//		    	nodeshape.fill = brush;
				}
			},
			click2() {
				let selnode = this.myDiagram.selection.first();
				let center = selnode.location.x;
				let thiz = this;
				for (let it = this.myDiagram.selection.iterator; it.next();) {
					let part = it.value;

					let x = center;
					let y = part.location.y;
					thiz.myDiagram.model.setDataProperty(
						part,
						"location",
						new go.Point(x, y)
					);
				}
			},
			click3() {
				let i = 0;
				let center = 0;
				let thiz = this;
				for (let it = this.myDiagram.selection.iterator; it.next();) {
					let part = it.value;
					if (i == 0) {
						center = part.location.y;
					} else {
						let x = part.location.x;
						let y = center;
						thiz.myDiagram.model.setDataProperty(
							part,
							"location",
							new go.Point(x, y)
						);
					}
					i = i + 1;
				}
			},
			close() {
				this.showtype = null;
				this.actGnode = null;
				this.actGlink = null;
				this.actNode = null;
				this.actLink = null;
			},
			getKey(type = 1) {
				let tkey = this.randomString(14);
				while (this.usedkeys.indexOf(tkey) > -1) {
					tkey = this.randomString(14);
				}
				if (type == 1) {
					tkey = "N-" + tkey;
				} else {
					tkey = "L-" + tkey;
				}
				return tkey;
			},
			randomString(len) {
				len = len || 32;
				var $chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; ///****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/  ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678
				var maxPos = $chars.length;
				var pwd = "";
				for (let i = 0; i < len; i++) {
					pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
				}
				return pwd;
			},
			getModelNode(tkey) {
				let rnode = null;
				this.bussinessModel.node.forEach((enode, index) => {
					if (enode.code == tkey) {
						rnode = enode;
					}
				});
				return rnode;
			},
			getModelNodeIndex(tkey) {
				let rindex = -1;
				this.bussinessModel.node.forEach((enode, index) => {
					if (enode.code == tkey) {
						rindex = index;
					}
				});
				return rindex;
			},
			getModelLink(tkey) {
				let rlink = null;
				this.bussinessModel.edge.forEach((elink, index) => {
					if (elink.code == tkey) {
						rlink = elink;
					}
				});
				return rlink;
			},
			getModelLinkIndex(tkey) {
				let rindex = -1;
				this.bussinessModel.edge.forEach((elink, index) => {
					if (elink.code == tkey) {
						rindex = index;
					}
				});
				return rindex;
			},
			setBussinessNode(v) {
				this.myDiagram.model.setDataProperty(this.actGnode.data, "text", v.name);
				let tindex = this.getModelNodeIndex(v.code);
				if (tindex > -1) {
					this.bussinessModel.node[tindex] = v;
				}
				this.close();
			},
			setBussinessLink(v) {
				this.myDiagram.model.setDataProperty(this.actGlink.data, "text", v.name);
				let tindex = this.getModelLinkIndex(v.code);
				if (tindex > -1) {
					this.bussinessModel.edge[tindex] = v;
				}
				this.close();
			},
			setBussinessModel(v) {
				this.bussinessModel = v;
				this.close();
			},
			initFlow() {
				//新增流程初始化
				this.myDiagram.model = go.Model.fromJson({
					class: "go.GraphLinksModel",
					linkFromPortIdProperty: "fromPort",
					linkToPortIdProperty: "toPort",
					nodeDataArray: [],
					linkDataArray: [],
				});
				this.bussinessModel = {
					classId: this.bussinessId,
					code: null,
					version: 1.0,
					active: true,
					node: [],
					edge: [],
					// userVars:[],
					vvar:[],
					jpush: true,
					sms: false,
				};
				this.bussinessModel.code = "F-" + this.randomString(14);
			},
			workplanversion() {
				//查询流程版本
				workplanversion({
					classId: this.bussinessId,
				}).then((res) => {
					this.versions = res.info;
				});
			},
			setBussinessId(id) {
				//设置 业务模型id  打开业务模型
				this.bussinessId = id;
				this.workplandetail();
				this.workplanversion();
			},
			workplandetail() {
				//获取流程详情
				workplandetail({
					classId: this.bussinessId,
				}).then((res) => {
					if (res.success) {
						if (res.info == null) {
							this.initFlow();
						} else {
							this.bussinessModel = res.info;
							this.version = this.bussinessModel.id;
							this.model = res.info.pic;
							this.myDiagram.model = go.Model.fromJson(this.model);
						}
						this.$set(this.myDiagram, "isReadOnly", false);
					} else {
						this.message(res.msg, 3);
					}
				});
			},
			workflowdetailByid() {
				workplandetail({
					id: this.version,
				}).then((res) => {
					if (res.success) {
						if (res.info == null) {
							this.initFlow();
						} else {
							this.bussinessModel = res.info;
							this.model = res.info.pic;
							this.myDiagram.model = go.Model.fromJson(this.model);
						}
						this.$set(this.myDiagram, "isReadOnly", false);
					} else {
						this.message(res.msg, 3);
					}
				});
			},
			checkDataChange(e) {
				this.workflowdetailByid();
			},
			workplansave() {
				this.$set(this.bussinessModel, "pic", this.myDiagram.model.toJSON());
				console.log(this.bussinessModel);
				let this_ = this;
				workplansave(this.bussinessModel).then((res) => {
					if (res.success) {
						if (!this_.bussinessModel.id) {
							//如果是空id 就赋值   this.bussinessModel  code  value
							res.info.forEach((item, index) => {
								if (item.code.indexOf("F-") > -1) {
									this_.bussinessModel.id = item.value;
									this_.version = item.value;
								}
								if (item.code.indexOf("N-") > -1) {
									let tindex = this_.getModelNodeIndex(item.code);
									this_.bussinessModel.node[tindex].id = item.value;
								}
								if (item.code.indexOf("L-") > -1) {
									let tindex = this_.getModelLinkIndex(item.code);
									this_.bussinessModel.edge[tindex].id = item.value;
								}
							});
						}
						this.workplanversion();
						this.message(res.msg, 1);
					} else {
						this.message(res.msg, 3);
					}
				});
			},
			workplandelete() {
				if (this.bussinessModel.id) {
					this.messageBox("确定要删除当前业务模型！").then((res) => {
						if (res.action) {
							workplandelete({
								id: this.bussinessModel.id,
							}).then((resD) => {
								if (resD.success) {
									this.workplanversion();
									this.workplandetail();
									this.message(resD.msg, 1);
								} else {
									this.message(resD.msg, 3);
								}
							});
						}
					});
				} else {
					this.message("删除成功！", 1);
					this.workplandetail();
				}
			},

			clone() {
				let hased = false;
				this.versions.forEach((v, index) => {
					if (v.version == this.bussinessModel.version) {
						hased = true;
					}
				});
				if (!hased) {
					this.bussinessModel.id = null;
					this.bussinessModel.node.forEach((node, index) => {
						node.id = null;
					});
					this.bussinessModel.edge.forEach((edge, index) => {
						edge.id = null;
					});
					this.workplansave();
				} else {
					this.message(
						"业务模型版本" +
						this.bussinessModel.version +
						"已经存在！双击流程编辑空白处，修改版本！",
						3
					);
				}
			},
			view() {
				this.wpInstId = 101;
				this.showtype = "view";
			},
			//  	var key='123';
			//		var nodeData = myDiagram.model.findNodeDataForKey(key);
			//		nodeData.isKey = true;//isKey 是节点data中的一个属性
			//		myDiagram.model.updateTargetBindings(nodeData);
		},
	};
</script>

<style scoped>
	.sys-cell {
		width: 100%;
		height: 100%;
		border-radius: 6px;
		background: var(--system-page-content-bgc);
		border: 1px solid var(--system-page-content-border-color);
	}

	.cell-header {
		height: 34px;
		line-height: 34px;
		width: 100%;
		display: flex;
		padding: 0 10px;
		border-bottom: var(--cell-tool-line);
	}

	.cell-btn {
		height: 34px;
		line-height: 34px;
		width: 30px;
		font-size: 18px;
	}

	.divsplit {
		width: 1px;
		height: 26px;
		margin-top: 4px;
		border-right: 1px solid rgba(215, 215, 215, 1);
	}

	.cellcenter {
		height: calc(100% - 34px);
		width: 100%;
		display: flex;
	}

	#bussinessPaletteDiv {
		width: 100px;
		background: var(--system-page-content-bgc);
		border: 1px solid var(--button-border-color);
		margin: 10px 0px 10px 10px;
		border-radius: 6px;
	}

	#bussinessPaletteDiv>>>canvas {
		margin-top: 10px !important;
		height: 290px;
	}

	#bussinessDiagramDiv {
		flex-grow: 1;
		background: var(--system-page-content-bgc);
		border-radius: 6px;
	}

	#bussinessDiagramDiv>>> :focus,
	#bussinessPaletteDiv>>> :focus {
		outline: none !important;
	}

	/*版本下拉框高度设定*/
	.flow-version>>>.el-input__inner {
		height: 24px !important;
		line-height: 24px !important;
		width: 100%;
		margin-top: 4px;
		background: var(--page-menu-input-back-color);
	}

	.flow-version>>>.el-input__icon {
		height: 32px !important;
		line-height: 32px !important;
	}

	.flow-version span {
		height: 32px;
		line-height: 32px;
		width: 80px;
		text-align: right;
		margin-right: 13px;
		color: var(--system-form-text-color);
	}
</style>
